<template>
  <a-select
    style="width: 100%"
    v-bind="$attrs"
    v-on="$listeners"
    v-model="localValue"
  >
    <a-select-option
      v-for="item in dataList"
      :key="resolveValue(item)"
      :vlaue="resolveValue(item)"
    >
      <!-- 不使用悬浮 -->
      <span v-if="(item.$attrs && item.$attrs.disabledTooltip) || disabledTooltip">{{ resolveLabel(item) }}</span>
      <!-- 原生title属性 -->
      <span
        v-else-if="useOrigin"
        :title="resolveTips(item)"
      >{{ resolveLabel(item) }}</span>
      <!-- 使用tooltip -->
      <a-tooltip
        v-else
        placement="topLeft"
        :mouseLeaveDelay="0"
      >
        <template slot="title">
          {{ resolveTips(item) }}
        </template>
        <div>{{ resolveLabel(item) }}</div>
      </a-tooltip>
    </a-select-option>
  </a-select>
</template>

<script>
export default {
  name: 'SelectWithTooltip',
  components: {},
  model: {
    event: 'packageChange'
  },
  props: {
    value: {
      type: [String, Number, Array, Object],
      default: void 0
    },
    // 数据源，在不定义replaceFields属性的情况下，应为：[ { label: 'test1', value: '1' } ]
    dataList: {
      type: [Array],
      default() {
        return []
      }
    },
    // 禁用悬浮提示
    disabledTooltip: {
      type: Boolean,
      default: false
    },
    // 是否使用原生悬浮提示
    useOrigin: {
      type: Boolean,
      default: false
    },
    // 替换字段
    replaceFields: {
      type: Object,
      default() {
        return {
          label: 'label',
          value: 'value'
        }
      }
    },
    // 自定义提示内容，接收参数为每一个option项
    customTips: {
      type: Function,
      default: null
    },
    // 将选项的label包装到value中，变为{ key: string, label: string } 的格式
    labelInValue: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    localValue: {
      get() {
        if (this.labelInValue) {
          if (this.$attrs?.mode === 'multiple') {
            return this.value?.map((i) => (this.dataList?.findIndex((item) => i.key === item[this.replaceFields.value]) > -1 ? i.key : i.label))
          } else {
            let isExist = this.dataList?.findIndex((item) => this.value?.key === item[this.replaceFields.value]) > -1 // 此表单选项是否存在于列表中
            // 若回显值在列表找不到选项则返回名称name
            return isExist ? this.value?.key : this.value?.label
          }
        }
        return this.value
      },
      set(val) {
        if (this.labelInValue) {
          let datas = []
          // 多选时遍历
          if (this.$attrs?.mode === 'multiple') {
            for (let i of val) {
              let target = this.dataList.find((item) => item[this.replaceFields.value] === i || item[this.replaceFields.label] === i)
              datas.push({
                key: target ? i : this.value?.find((item) => item?.label === i || item?.key === i)?.key,
                label: target?.[this.replaceFields.label] || this.value?.find((item) => item?.label === i || item?.key === i)?.label
              })
            }
          } else {
            const target = this.dataList.find((item) => item[this.replaceFields.value] === val || item[this.replaceFields.label] === val)
            datas = {
              key: target ? val : this.value?.find((item) => item?.label === i || item?.key === i)?.key,
              label: target?.[this.replaceFields.label] || this.value?.find((item) => item?.label === i || item?.key === i)?.label
            }
          }
          this.$emit('packageChange', datas)
          return
        }
        this.$emit('packageChange', val)
      }
    }
  },
  methods: {
    resolveTips(data) {
      if (this.customTips) {
        return this.customTips(data)
      }
      return data[this.replaceFields.label]
    },
    resolveLabel(data) {
      return data[this.replaceFields.label]
    },
    resolveValue(data) {
      return data[this.replaceFields.value]
    }
  }
}
</script>

<style>
</style>